<template>

  <section class="main">
    <div class="item">
      <h3>{{detailNews.title}}</h3>
      <image v-for="(item ,index) in detailNews.picUrl " :key = index  :src="item.url"  />
      <p>{{ detailNews.content }}</p>
      <button @click="back">返回</button>
    </div>
  </section>

  
</template>

<script setup lang="ts">

import { ref } from 'vue';
import {get} from '@/HTTP/api'
import { useRoute, useRouter } from 'vue-router';



const key = '267083ded3dada11b4f131823b2efe94'

// 接收父组件通过路由传递过来的数据
  const route = useRoute()


  let detailNews = ref({
    title: '无',
    content:'无',
    picUrl:[{
      pic_title: "儒略历",
      id: 1,
      url: "http://images.juheapi.com/history/1_1.jpg"
    }]
  })

  function getList(){
        get('http://localhost:5173/api/todayOnhistory/queryDetail.php?key='+key + '&e_id=' + route.query.e_id).then(
          (date:any) =>{
            if(date.error_code === 0){ 
              detailNews.value = date.result[0]
                console.log(detailNews);
            }
          }
        )
    }

    getList()

    // 在路由组件中进行返回的方法
    const router = useRouter()
    function back(){
      router.back()
    }

</script>

<style scoped>
.main {
margin: 20px 0;
color: #333;
}
.main div.item {
padding: 20px;
line-height: 150%;
}
.main img {
max-width: 100%;
display: block;
margin-bottom: 10px;
}
</style>